<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas考试</title>
</head>
<style>
    .wrapper{
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
</style>
<body>

    <div class="wrapper">
        <div class="item">
            <div>第一题</div>
            <canvas id="canvas-1" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第二题</div>
            <canvas id="canvas-2" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第三题</div>
            <canvas id="canvas-3" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
        <div class="item">
            <div>第四题</div>
            <canvas id="canvas-4" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        <input type="button" id="ha" value="" />
        </div>
        <div class="item">
            <div>第五题</div>
            <canvas id="canvas-5" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
            <div>
                <input type="button" value="红" id="red">
                <input type="button" value="黄" id="yellow">
                <input type="button" value="蓝" id="blue">
                <input type="button" value="下载" id="download">
            </div>
        </div>
        <div class="item">
            <div>第六题</div>
            <canvas id="canvas-6" width="300" height="300" style="border: 1px solid #ccc;margin-top: 10px;"></canvas>
        </div>
    </div>
   
</body>
<script>
    window.onload = function() {
    	//1题
    var canvas=document.getElementById("canvas-1");
var cxt=canvas.getContext("2d");
//画一个空心圆
cxt.beginPath();
cxt.arc(70,70,50,0,60,false);
cxt.lineWidth=3;
cxt.strokeStyle="green";
cxt.stroke();//画空心圆
cxt.closePath();

 





//2题
var canvas=document.getElementById("canvas-2");
var cxt=canvas.getContext("2d");
//画一个实心圆
cxt.beginPath();
cxt.arc(50,50,50,0,60,false);
cxt.fillStyle="red";//填充颜色,默认是黑色
cxt.fill();//画实心圆
cxt.closePath();










//3题
var canvas=document.getElementById("canvas-3");
var cxt=canvas.getContext("2d");
   
   
   cxt.fillStyle = "azure";
   let x = 50,
       y = 50,
       width = 70,
       height = 70;
//   cxt.fillRect(x,y,width,height);
   
   setInterval(function(){
    cxt.translate(x + width / 2, y + height / 2);
    cxt.rotate(Math.PI / 180 * 30);
    cxt.translate(-(x + width / 2),-(y + height / 2));
    cxt.clearRect(0,0,500,500);
    cxt.fillRect(x,y,width,height);
   },200) //
   
   
   
   
   
   
  
   
}
   
				
	

   
 	
				


</script>
</html>